<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function yieldToMain() {
            return new Promise(resolve => {
                console.log('promise')
                setTimeout(()=>{
                    console.log('settimeout')
                    resolve()
                }, 0);
            });
        }

        function a() {
            console.log('a')
        }

        function b() {
            console.log('b')
        }

        function c() {
            console.log('c')
        }

        function d() {
            console.log('d')
        }

        async function saveSettings() {
            // Create an array of functions to run:
            const tasks = [a, b, c, d]

            // Loop over the tasks:
            while (tasks.length > 0) {
                // Shift the first task off the tasks array:
                const task = tasks.shift();

                // Run the task:
                task();

                // Yield to the main thread:
                await yieldToMain();
            }
        }

        saveSettings()
    </script>
</body>

</html>